<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 步骤1：引用ECharts.js 外部动态脚本插件库 -->
    
    <script src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js" ></script>
</head>
<body>
    <!-- 步骤2：创建一个DOM容器 -->
    <div id="barContainer" style="width:600px; height:400px"></div>
    <script type="text/javascript">
        // 步骤3：创建一个ECharts对象
        barChart = echarts.init(document.getElementById("barContainer"));
        console.log("Process:> barChart图表对象创建完毕……OK");
        // 步骤4：设置option配置选项
        var option = {
            title:{text:"ECharts异步数据加载示例"},
            tooltip:{},
            legend:{data:["销量"]},
            xAxis:{data:[]},
            yAxis:{},
            series:{name:"销量", type:"bar", data:[]}
        };

        console.log("Process:> option配置选项创建并初始化完毕……OK");
        // 步骤:6：完成对图表对象的option设置
        barChart.setOption(option);

        // 步骤5：使用Ajax动态获取JSON数据并绑定组件
        console.log("Process:> 启动Ajax读取json数据……OK");
        // 显示loading加载动画
        barChart.showLoading();
       
        
        // 模拟网络延迟2秒
        setTimeout(function(){
            $.ajax("${pageContext.request.contextPath}/data/demo02.json").done(
                function(data){
                // 隐藏loading加载动画
                barChart.hideLoading();
                // 将读取到的json数据绑定到组件
                barChart.setOption({
                    xAxis:{data: data.categoriesArray},
                    series:{name: "销量", data: data.dataArray}
                });
                }
            );        
            console.log("Process:> json数据成功绑定到组件……OK");            
            console.log("Process:> barChart成功配置option选项……OK");
            

        },2000);
    </script>
</body>
</html>